<template>
	<view>
		<view class="list">
			<view class="list-item tp-w690 tp-mt20 tp-pd30 tp-bbox tp-bgf tp-br12" v-for="(item,index) in riderPersionList" :key="index">
				<view class="level_align flex_between tp-fc333">
					<text class=" tp-fz30 tp-fw600">{{item.passengerName}}</text>
					<view class="tp-fz24 level_align">
						<view @click="handleGoBusAddRider(item)" class="level_align tp-mr30">
							<image class="tp-img28 tp-mr20" src="../static/imgs/icons/edit-icon.png" mode=""></image>
							编辑
						</view>
						<view @click="handleDelChoosedRider(item,index)" class="level_align">
							<image class="tp-img28 tp-mr20" src="../static/imgs/icons/del.png" mode=""></image>
							删除
						</view>
					</view>
				</view>
				<view class="level_align tp-fc666 tp-fz28 tp-mt20">
					电话：<text>{{item.phone}}</text>
				</view>
				<view class="level_align tp-fc666 tp-fz28 tp-mt20">
					{{item.certTypeName}}：<text>{{item.certificateNumber}}</text>
				</view>
			</view>
		</view>
		<view class="center_combo tp-h98" v-if="showLoadMore">{{loadMoreText}}</view>
		<uni-popup ref="modalBox" :maskClick="false" type="center">
			<view class="modal_box-wrap">
				<view class="alert-icon">
					<image src="@/static/imgs/icons/alert-icon.png" mode=""></image>
				</view>
				<view class="p">是否确认删除？</view>
				<view class="btns-wrap">
					<view class="btn cancel" @click="handleCloseModalBox">取消</view>
					<view class="btn confirm" @click="handleConfirmDelRider">确认</view>
				</view>
				<uni-icons @click="handleCloseModalBox" class="close-icon" type="close" size="30" color="#999"></uni-icons>
			</view>
		</uni-popup>
		<view class="tp-h98"> </view>
		<view class="tp-bgf tp-btn-h100 tp-h98 center_combo">
			<text @click="handleGoBusAddRider" class="tp-h72 tp-w690 tp-fcF tp-fz32 tp-br12 center_combo" style="background: #FFAF3C;">添加成员</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				riderPersionList: [],
				checkItem: {}, // 要删除的联系人
				index: null, // 要删除的index
				page: {
					pageNum: 1,
					totalPageNum: 0,
					pageSize: 10,
					last_page: 1
				},
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
		},
		onShow() {
			this.page.pageNum = 1
			this.getRiderList()
		},
		// 上拉触底
		onReachBottom() {
			if (this.page.pageNum < this.page.last_page) {
				this.showLoadMore = true;
				this.page.pageNum += 1
				this.getRiderList();
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},
		methods: {
			// onshow 获取乘客列表信息
			getRiderList() {
				// this.page.pageNum = 1
				let api = this.$api.getRiderList + '?pType=0&scene=0'

				let {
					pageSize,
					pageNum
				} = this.page
				this.$http.get(api, {
					pageSize,
					pageNum
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						// this.riderPersionList = res.data.result
						this.page.totalPageNum = res.data.total
						this.page.last_page = Math.ceil(this.page.totalPageNum / 10)
						if (this.page.pageNum > 1) {
							this.riderPersionList = this.riderPersionList.concat(res.data.result);
						} else {
							this.riderPersionList = res.data.result
						}
					}
				})
			},
			// 添加编辑联系人
			handleGoBusAddRider(item) {
				uni.navigateTo({
					url: '/pagesTravel/bus.addRider?pType=0&id=' + item.id + '&scene=0'
				});
			},
			// 删除确认
			handleConfirmDelRider() {
				let ids = this.checkItem.id

				let api = this.$api.delRider
				this.$http.delete(api + '?passengerId=' + ids).then(res => {
					if (res.code == 200) {
						this.riderPersionList.splice(this.index, 1)
						this.handleCloseModalBox()
					}
				})
			},
			// 删除弹框
			handleDelChoosedRider(item, index) {
				this.checkItem = item
				this.index = index
				this.$refs.modalBox.open()
			},
			// 关闭删除弹框
			handleCloseModalBox() {
				this.$refs.modalBox.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.modal_box-wrap {
		background-color: #fff;
		width: 582rpx;
		border-radius: 20rpx;
		padding: 80rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		position: relative;

		.alert-icon {
			width: 118rpx;
			height: 138rpx;
		}

		.p {
			padding: 40rpx 0 60rpx;
			font-size: 30rpx;
		}

		.btns-wrap {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 218rpx;
				height: 73rpx;
				line-height: 73rpx;
				text-align: center;
				border-radius: 37px;
				font-size: 28rpx;

				&.cancel {
					border: 1px solid #ccc;
					color: #ccc;
				}

				&.confirm {
					background-color: $blue;
					color: #fff;
				}
			}
		}

		.close-icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 2;
		}
	}
</style>
